@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/public.css')}}">
<link rel="stylesheet" href="{{URL::asset('./css/hrmy/safe_pass.css')}}">

@section('content')
<div class="mainHrContent" id="hrSafe">
    <div class="storelistTitle">
        <span class="storelistTitle_left">
            <span>
                <img src="{{URL::asset('./img/icon/home.png')}}">
            </span>
            <span><a href="{{route('home.index.index') }}">首页</a> >
                <a href="{{route('home.hrmy.hrIndex') }}">用户中心</a>
                > 安全中心
            </span>
        </span>
        <span class="storelistTitle_right">
            <span>找不到合适的供应商？发个需求试试？</span>
            <button @click=" window.location.href = '{{ route('home.demand.demandAdd') }}'">免费发布需求</button>
        </span>
    </div>
    <div class="hrContent">
        @include('home.hrmy.menu')
        <div class="basicInfo" id="hrSafes">
            <div class="basicInfo_title">
                <span></span>
                安全中心 > 密码修改
            </div>
            <div class="userDetails">
                <el-form :model="form" :rules="rules" ref="ruleForm">
                    <p style=" font-weight: 540;text-shadow: 0px 0px 0px #000;">
                        <span class="details_title">已验证手机：</span>
                        @{{mobile}}
                    </p>
                    <p>
                        <span class="details_title">新密码：</span>
                        <el-input v-model="form.password"></el-input>
                    </p>
                    <el-form-item prop="verifyPass">
                        <p>
                            <span class="details_title">确认密码：</span>
                            <el-input v-model="form.verifyPass"></el-input>
                        </p>
                    </el-form-item>
                    <!-- <p>
                    <span class="details_title">验证码：</span>
                    <el-input style="width:140px;"></el-input>
                    <img class="codeImg">
                    <button class="resetCode">刷新验证码</button>
                </p> -->
                    <el-form-item prop="code">
                        <p>
                            <span class="details_title">手机验证码：</span>
                            <el-input style="width:140px;" v-model="form.code"></el-input>
                            <a class="getCode" @click="getCode">获取验证码
                                <span v-if="codeBo">
                                    @{{'（'+codeTime+'）'}}
                                </span>
                            </a>
                        </p>
                    </el-form-item>
                </el-form>
                <button @click="submitForm('ruleForm')">保存修改</button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('compontentScipts')
<script>
    $(() => {
        let hrSafe = new Vue({
            el: '#hrSafes',
            data: () => {
                return {
                    form: {
                        password: '',
                        verifyPass: '',
                        code: "",
                    },
                    mobile: getQueryString("mobile"),
                    rules: {
                        verifyPass: [{
                            required: true,
                            message: "密码不得为空",
                            trigger: 'blur'
                        }],
                        code: [{
                            required: true,
                            message: '验证码不能为空',
                            trigger: 'blur'
                        }],
                    },
                    codeBo: false,
                    codeTime: 60,
                }
            },
            created() {},
            mounted() {},
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            if (this.form.password == this.form.verifyPass) {
                                alert('submit!');

                            } else {
                                this.$message({
                                    message: "两次密码不一致",
                                    type: 'warning'
                                });
                            }
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                getCode() {
                    if (this.codeTime == 60) {
                        this.codeBo = true
                        let a = setInterval(() => {
                            this.codeTime -= 1;
                            if (this.codeTime == 0) {
                                this.codeBo = false;
                                this.codeTime = 60;
                                clearInterval(a)
                            }
                        }, 1000);
                    }
                },
            }
        })
    })
</script>
@endsection